<template>

  <div class="attachments">
    <el-divider v-if="images.length > 0" content-position="left">图片集</el-divider>
    <div class="image-item" v-for="(item, idx) in images" :key="'image-' + idx">
      <image-view :src="item.url"></image-view>
    </div>
    <el-divider v-if="videos.length > 0" content-position="left">视频集</el-divider>
    <div class="video-item" v-for="(item, idx) in videos" :key="'video-' + idx">
      <video-view :src="item.url"></video-view>
    </div>
    <el-divider v-if="files.length > 0">其他附件</el-divider>
    <div class="download-item" v-for="(item, idx) in files" :key="'file-' + idx">
      <a :href="item.url|url" :download="item.name  +'.' + item.extension" target="_blank" class="el-icon-download">下载 {{item.name}}.{{item.extension}}</a>
    </div>
  </div>


</template>

<script>
export default {
  props: {
    value:{
      type: String|Array
    }
  },
  data() {


    return {
      images: [],
      videos: [],
      files: []
    };
  },
  watch:{
     value:{
       handler(val){
         let attachments = (typeof this.value === 'string' ? JSON.parse(this.value || '[]') : this.value) || []
         console.log(attachments);
         let images = attachments.filter(item =>['jpg', 'webp', 'png', 'jpeg'].includes(item.extension.toLowerCase()));
         let videos = attachments.filter(item =>['mp4'].includes(item.extension.toLowerCase()));
         let files = attachments.filter(item =>!['jpg', 'webp', 'png', 'jpeg', 'mp4'].includes(item.extension.toLowerCase()));
         this.images = images;
         this.files = files;
         this.videos = videos;
       },
       immediate: true
     }
  },
  computed: {


  },
  methods: {

  }
};
</script>
<style scoped lang="scss">

.attachments{
  .image-item{
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;

  }

}


</style>
